<template>
  <div class="fuzzy_search">
    <div class="search_wrap">
      <div class="search_box">
        <i class="iconfont iconsousuo" @click="gotoSearch"></i>
        <input type="text" :value="searchTxt" @input="inputResult" @keyup.enter="gotoSearch" />
        <span @click="clean"></span>
      </div>
      <span class="cancel" @click="back">取消1</span>
    </div>
    <!-- <ul class="search_result" v-if="searchResult">
      <li @click="searchResultJump">
        <i class="iconfont iconsousuo"></i>燃气井RQ14059
        <span>燃气泄漏</span>预警
      </li>
      <li>
        <i class="iconfont iconsousuo"></i>燃气井RQ14059
        <span>燃气泄漏</span>预警
      </li>
      <li>
        <i class="iconfont iconsousuo"></i>燃气井RQ14059
        <span>燃气泄漏</span>预警
      </li>
    </ul>-->
    <div class="warn_list_box">
      <p class="record">共{{ recordCount }}条记录</p>
      <div class="infinite-list-wrapper" style="overflow:auto">
        <ul class="warning_infor">
          <li
            class="notdisposal"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
            @click="warningDetails(1, item.alarmId,item.readstatus)"
            v-for="item in alarmDataLs"
            :key="item.alarmId"
          >
            <h5>
              <span class="warn_icon">
                 <span class="dot" v-if="item.dealType!='3'&& status!='4'&& item.readstatus=='0'"></span>
              </span>
              {{ item.alarmName }}
            </h5>
            <button
              :class="[
                'disposal_status',
                item.dealType == 1 ? 'notdisposal' : '',
                item.dealType == 2 ? 'disposaling' : '',
                item.dealType == 3 ? 'hasdisposal' : ''
              ]"
            >{{ getDealTxt(item.dealType) }}</button>
            <table>
              <tr>
                <td class="lable_td" width="100px">最新报警时间</td>
                <td>{{ item.monitortime }}</td>
              </tr>
              <tr>
                <td class="lable_td">具体位置</td>
                <td>{{ item.address }}</td>
              </tr>
            </table>
          </li>
        </ul>
        <p v-if="loading" style="text-align: center;">加载中...</p>
        <p v-if="noMore" style="text-align: center;">没有更多了</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status:"",
      searchResult: true,
      dealTypeParam: ["1", "2", "3"],
      searchKeyParam: ["1", "2", "3"],
      searchTxt: "",
      alarmDataLs: [],
      recordCount: 0,
      hasMore: true,
      loading: false
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    searchResultJump() {
      this.$router.push({ name: "warnlist" });
    },
    inputResult(e) {
      this.searchTxt = e.target.value;
      this.searchResult = true;
      console.log("----input" + "---" + this.searchTxt);
    },
    warningDetails(id, alId,readstatus) {
      if (this.status!="4"&&readstatus == '0') {
          var param = {
            userId: this.$store.state.userInfo.id,
            userName: this.$store.state.userInfo.loginName,
            alarmId: alId,
          };
          this.$api.reqApi.stateChange(param);
        }
      this.$router.push({
        name: "mapdistribution",
        query: {
          userId: id,
          alarmId: alId
        }
      });
    },
    clean(){ 
      this.searchTxt="";
      this.gotoSearch()
    },
    gotoSearch() {
      console.log("----------------" + "gotoSearch");
      this.getWarnList();
    },
    load() {
      this.loading = true;
      this.pageNumVar++;
      this.isLoadMore = true;
      setTimeout(() => {
        this.getWarnList();
        this.loading = false;
      }, 2000);
    },
    getWarnList() {
     
      var param = {
        dealType: this.dealTypeParam,
        pageNum: this.pageNumVar,
        pageSize: this.pageSizeVar,
        searchKey: this.searchKeyParam,
        searchCondition: this.searchTxt,
        userName:this.$store.state.userInfo.loginName
      };
      if(this.status!="4"){
           this.$api.reqApi.alarmList(param).then(res => {
          if (res.code === "200") {
            console.log(res);
            this.recordCount = res.data.count;
            if (!this.isLoadMore) {
              this.alarmDataLs = res.data.details;
            } else {
              var tempArray = new Array();
              tempArray = tempArray.concat(this.alarmDataLs);
              this.alarmDataLs = tempArray.concat(res.data.details);
            }
            this.hasMore = res.data.details.length == this.pageSizeVar;
            console.log(
              "alarmDataLs.length=" +
              this.alarmDataLs.length +
              "hasmore=" +
              this.hasMore
            );
            // this.alarmDataLs = this.alarmDataLs.concat(res.data.details);
            // this.alarmDataLs = this.alarmDataLs.concat(res.data.details);
          } else {
            this.recordCount = 0;
          }
        });
        }else{
           this.$api.reqApi.alarmHistoryList(param).then(res => {
          if (res.code === "200") {
            this.recordCount = res.data.count;
            if (!this.isLoadMore) {
              this.alarmDataLs = res.data.details;
            } else {
              var tempArray = new Array();
              tempArray = tempArray.concat(this.alarmDataLs);
              this.alarmDataLs = tempArray.concat(res.data.details);
            }
            this.hasMore = res.data.details.length == this.pageSizeVar;
          } else {
            this.recordCount = 0;
          }
        });
        }
     
    },
    getDealTxt(value) {
      var text = "已处置";
      switch (value) {
        case 1:
          text = "未处置";
          break;
        case 2:
          text = "处置中";
          break;
        case 3:
          text = "已处置";
          break;
      }
      return text;
    }
  },
  mounted() {
    let _this = this;
    window["dsBridge"].register("GoBack", function() {
      _this.$router.go(-1);
    });
    window["dsBridge"].register("whetherHtml", function(ret) {
      console.log("=======ret:" + ret);
      return true;
    });
     this.status=this.$route.query.status;
      this.searchKeyParam=this.$route.query.searchKeyParam;
       this.dealTypeParam=this.$route.query.dealTypeParam;
  },
  computed: {
    noMore() {
      return !this.hasMore;
    },
    disabled() {
      return this.loading || !this.hasMore;
    }
  }
};
</script>

<style  lang="stylus" scoped>
_colorbg(color, bg) {
  color: color;
  background: bg;
}

.search_wrap {
  padding: 0 0.3rem;
  padding-top: 0.6rem;
  height: 0.88rem;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.15rem;
  background-image: linear-gradient(to right, #2c85e9, #0d63d6);
}

.fuzzy_search {
  height: fit-content;
  background: #f5f6fa;
}

.search_box {
  width: calc(100% - 0.76rem);
  height: 0.67rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.08rem;
  display: flex;
  flex-direction: row;

  i {
    line-height: 0.66rem;
    margin-left: 0.14rem;
    color: #fff;
    margin-right: 0.16rem;
  }

  span {
    width: 10%;
    height: 100%;
    display: block;
    background: url('../assets/images/icon-qx.png') no-repeat center center;
    background-size: 0.4rem;
  }

  input {
    flex: 1;
    background: transparent;
    border: 0;
  }
}

.cancel {
  color: #fff;
  display: block;
  line-height: 0.66rem;
  padding-left: 0.2rem;
}

.search_result {
  margin: 0 0.3rem;
  background: #fff;

  li {
    height: 1.09rem;
    line-height: 1.09rem;
    border: #dde0e4 1px solid;
    color: #333333;
    font-size: 0.3rem;
  }

  span {
    color: #428ee3;
  }

  i {
    color: #979ea0;
    font-size: 0.3rem;
    padding: 0 0.18rem;
  }
}
// .notdisposal span::before {
//   content: '';
//   width: 0.17rem;
//   height: 0.17rem;
//   position: absolute;
//   background: #ff3f47;
//   top: -0.06rem;
//   right: -0.06rem;
//   border-radius: 50%;
//   border: #fff 0.02rem solid;
// }
  .dot {
    width: 0.17rem;
    height: 0.17rem;
    position: absolute;
    background: #ff3f47;
    top: -0.06rem;
    right: -0.06rem;
    border-radius: 50%;
    border: #fff 0.02rem solid;
  }

.warn_list_box {
  background: #f5f6fa;
  width:100%;
  top:1.5rem;
  overflow:scroll;
  position: absolute;
  bottom :0;
  

  .record {
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: center;
    color: #989da0;
  }
}

.warning_infor {
  height: fit-content;

  li {
    height: fit-content;
    background: #fff;
    box-shadow: 0 7px 10px 0px rgba(157, 168, 177, 0.3);
    margin-bottom: 0.3rem;
    border-radius: 7px;
    padding: 0.3rem;
    box-sizing: border-box;
    position: relative;

    h5 {
      font-size: 0.3rem;
      color: #2a2c32;

       .warn_icon {
          width: 0.5rem;
          height: 0.5rem;
          background: url('../assets/images/warning_icon1.png');
          background-size: contain;
          margin-right: 0.15rem;
          display: block;
          float: left;
          position: relative;
        }
    }
  }

  .disposal_status {
    width: 1.05rem;
    height: 0.4rem;
    position: absolute;
    right: 0.2rem;
    top: 0.42rem;
    border: 0;
    font-size: 0.24rem;
    border-radius: 8px 0 8px 0;
  }

  table {
    margin-top: 0.18rem;
  }

  table td {
    padding: 5px 10px 5px 0;
  }

  .lable_td {
    color: #666;
  }
}

button.notdisposal { // 未处置
  _colorbg(#e8555b, rgba(232, 86, 90, 0.1));
}

.disposaling { // 处置中
  _colorbg(#faa762, rgba(250, 167, 98, 0.1));
}

.hasdisposal { // 已处置
  _colorbg(#81c26b, rgba(129, 194, 107, 0.1));
}

.easy_refresh {
  width: 100%;
  height: 100%;
  margin-bottom: 1px;
}
</style>
